<template>
  <div class="image-cover-div">
    <el-image
      :style="{'width':width,'height': height}"
      :src="imgUrl||defaultImgUrl"
      fit="cover"
      :preview-src-list="[imgUrl]">
    </el-image>
  </div>
</template>

<script>
  export default {
    name: "image-cover-preview",
    props: {
      width: {
        type: String,
        default() {
          return '300px'
        },
      },
      height: {
        type: String,
        default() {
          return '300px'
        },
      },
      imgUrl: {
        type: String,
        default() {
          return ''
        },
      },
    },
    data() {
      return {
        defaultImgUrl: 'https://dongping.jnaw.top/dongping_static/defaultImg.png',
      }
    },
  }
</script>

<style scoped>
  .image-cover-div {
    display: inline-block;
    margin-right: 8px;
  }

  .image-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
